"use strict";
//path模块提供了用于处理文件和目录的路径的实用工具，它提供了一系列的属性和方法，用来满足用户对路径的处理需求。
const path = require("path");
//使用path.join()方法，可以把多个路径片段拼接为完整的路径字符串
function resolve(dir) {
	return path.join(__dirname, dir);
}
const name = process.env.VUE_APP_TITLE || "study"; //标题
const port = process.env.port || process.env.npm_config_port || 7777; //端口

//vur.config.js是一个可选的配置文件，如果项目的（和 packages.json 同级的）根目录中存在这个文件，那么它会被@vue/cli-service自动加载
const { defineConfig } = require("@vue/cli-service");

//这里的webpack配置会和公共的webpack.config.js进行合并
module.exports = defineConfig({
	transpileDependencies: true, //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你可以启用本选项，以避免构建后的代码中出现未转译的第三方依赖。
	publicPath: process.env.NODE_ENV !== "production" ? "/" : "/", //默认情况下，Vue Cli会假设你的应用被部署在一个域名的根路径上，如'https://www.my-app.com/'。如果应用被部署在一个子路径（如'https://www.my-app.com/admin'）上。就需要使用这个选项指定这个子路径
	outputDir: "dist", //当npm run build或yarn build时，生成文件的目录名称（默认为dist）
	assetsDir: "static", //用于放置生成的静态资源（js、css、img、fonts）的（项目打包后，静态资源会放在这个路径下）
	lintOnSave: false, //是否开启eslint；true|false|'error'
	productionSourceMap: false, //如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

	//webpack-dev-server
	devServer: {
		//host/port/https可能会被命令行参数覆写
		//publicPath和historyApiFallback不能被修改，他们需要和开发服务器的publicPath同步以保障正常的工作
		host: "localhost",
		port: port,
		open: true,
		//前端和后端API服务器没有运行在同一主机上，需要在开发环境下将api请求代理到API服务器，使用devServer.proxy选项配置
		proxy: {
			[process.env.VUE_APP_BASE_API]: {
				target: "localhost:7777", //前后端地址
				changeOrigin: true, //是否跨域
				ws: true, //代理websockets
				pathRewrite: {
					//路径重写
					["^" + process.env.VUE_APP_BASE_API]: "",
				},
				//多个代理控制行为（地址）
				// "/foo": {
				// 	target: "<other_url>",
				// },
			},
		},
		// disableHostCheck: true,
	},

	//webpack配置项
	configureWebpack: {
		name: name,
		resolve: {
			alias: {
				"@": resolve("src"),
			},
		},
	},

	chainWebpack: (config) => {
		config.plugins.delete("preload");
		config.plugins.delete("prefetch");
		config.module.rule("svg").exclude.add(resolve("src/assets/icons")).end();
		config.module
			.rule("icons")
			.test(/\.svg$/)
			.include.add(resolve("src/assets/icons"))
			.end()
			.use("svg-sprite-loader")
			.loader("svg-sprite-loader")
			.options({
				symbolId: "icon-[name]",
			})
			.end();
		// const entry = config.entry("app");
		// entry.add("babel-polyfill").end();
	},
	transpileDependencies: [/node_modules/],
});
